<template>
  <div class="login-wrapper">
    <el-card class="box-card login-form">
      <h3 class="title">核心后台管理系统</h3>
      <el-form ref="ruleForm" :rules="rules" :model="form">
        <el-form-item prop="mobile">
          <el-input
            v-model.trim="form.mobile"
            prefix-icon="el-icon-user"
            maxlength="11"
            show-word-limit
            clearable
            placeholder="请输入手机号码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model.trim="form.password"
            type="password"
            prefix-icon="el-icon-unlock"
            maxlength="16"
            show-word-limit
            clearable
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-checkbox v-model="form.checked" class="mb-2">记住密码</el-checkbox>
        <el-form-item>
          <el-button
            class="w_100"
            type="primary"
            @click="onSubmit"
            :loading="loading"
          >
            {{ loading ? "登录中" : "登录" }}
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <p class="text-white text-center fixed-bottom mb-2">
      Copyright © 2021-2021 All Rights Reserved.
    </p>
  </div>
</template>

<script>
import { reactive, toRefs, getCurrentInstance, onMounted } from 'vue';
import { loginApi, getPermiApi } from '@/api/system.api';

import { FactoryStore, FactoryRouter } from '@/hooks';
import { USER_ACTION, ROLES_ACTION, PERMI_ACTION } from '@/utils/Const';
import { isMobile, isPassword } from '@/utils/validate';
export default {
	name : 'login',
	setup () {
		let { action } = FactoryStore({
			namespaced : 'user',
			actionsMethod : [USER_ACTION]
		});
		let { action : rolesAction } = FactoryStore({
			namespaced : 'permission',
			actionsMethod : [ROLES_ACTION]
		});
		let { action : permiAction } = FactoryStore({
			namespaced : 'permission',
			actionsMethod : [PERMI_ACTION]
		});
		let { route, router } = FactoryRouter();
		let ruleForm = null;
		let data = reactive({
			loading : false,
			form : {
				checked : false,
				mobile : '17621334566',
				password : '123456...'
			},
			rules : {
				mobile : [
					{
						required : true,
						validator : (rule, value, callback) => {
							if (!isMobile(value)) {
								callback(new Error('请输入11位合法的手机号码'));
							} else {
								callback();
							}
						},
						trigger : 'blur'
					}
				],
				password : [
					{
						required : true,
						validator : (rule, value, callback) => {
							if (!isPassword(value)) {
								callback(new Error('数字,字母，特殊字符，任意2种组合(6-16)位'));
							} else {
								callback();
							}
						},
						trigger : 'blur'
					}
				]
			}
		});

		let onSubmit = () => {
			ruleForm.validate(async (valid) => {
				if (valid) {
					data.loading = true;
					try {
						const res = await loginApi(data.form);
						const permis = await getPermiApi();
						// 菜单
						action[USER_ACTION](res);
						// 角色
						rolesAction[ROLES_ACTION](permis.roles);
						// 权限
						permiAction[PERMI_ACTION](permis.permissions);
						router.push({
							path : route.query.redirect || '/dashboard'
						});
					} finally {
						data.loading = false;
					}
				}
			});
		};

		onMounted(() => {
			ruleForm = getCurrentInstance().proxy.$refs['ruleForm'];
		});

		return {
			onSubmit,
			...toRefs(data)
		};
	}
};
</script>

<style lang="scss" scoped>
.login-wrapper {
  width: 100%;
  height: 100%;
  background: url("~@/assets/images/login-background.jpg");
  background-size: cover;
}
.title {
  margin: 0 auto 30px auto;
  text-align: center;
  color: #707070;
}
.login-form {
  border-radius: 6px;
  width: 400px;
  padding: 25px 25px 5px 25px;
  width: 400px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
